<template>
  <view class="teachers">
    <view v-for="(item, index) in ajax.list" class="item" @click="onGoTeacher(item.id)">
      <view class="item-avatar">
        <uv-avatar :src="item.profilePhoto || defaultImages[2]" size="120.349rpx" mode="aspectFill"></uv-avatar>
      </view>
      <view class="item-info">
        <view class="top">
          <view class="top-main">
            {{ item.username }}
            <view class="top-main-subtitle"> 课程数 {{ item.lessons }} </view>
          </view>
          <view class="top-button" @click.stop="onCancelCollect(item, index)"> 已收藏 </view>
        </view>

        <uv-line color="#e5e5e5" margin="26.163rpx 0 0 0"></uv-line>
      </view>
    </view>
  </view>
  <uv-toast ref="toastRef"></uv-toast>
</template>

<script setup>
  import { defaultImages, defaultImagesList, gradeOptions, shareList } from '@/common/js/global.js';
  import flow from '@/pages/index/index3Compontents/flow.vue';
  import { ref, getCurrentInstance, watch, reactive, nextTick } from 'vue';
  import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce.js';
  import { getWeek, onGoTeacher } from '@/common/js/fn.js';
  const instance = getCurrentInstance();
  const props = defineProps({
    current: {
      type: Number,
      default: 0
    },
    top: {
      type: Number,
      default: 0
    }
  });
  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    classify: 'Teacher',
    sort: 0
  });
  let ajax = reactive({
    list: [],
    totalPage: 1
  });

  let init = async () => {
    let options = JSON.parse(JSON.stringify(params));
    options.orderBy = ['Lesson', params.sort ? 'asc' : 'desc'];
    let { pagination, teachers } = await uni.$uv.http.post('/app/collect/teachers', options);
    ajax.totalPage = pagination.totalPage;
    ajax.list.push(
      ...teachers.map(r => {
        return { ...r, cover: r.cover || defaultImagesList[0] };
      })
    );
  };
  watch(
    () => props.current,
    val => {
      if (val === 2) {
        ajax.list = [];
        init();
      }
    },
    { immediate: true }
  );

  let scrollOldTop = ref(0),
    scrollActive = ref(0);
  let autoVideo = () => {
    ajax.list.forEach(r => {
      r.autoVideo = false;
    });
    let num = scrollActive.value;
    // 如果是竖着的，那下个也要播放
    if (
      ['Lesson', 'MerchantLesson', 'Video'].includes(ajax.list[num].classify) &&
      ['Lesson', 'MerchantLesson', 'Video'].includes(ajax.list[num + 1].classify)
    ) {
      ajax.list[num + 1].autoVideo = true;
    }
    ajax.list[num].autoVideo = true;
  };
  // 滚动事件，然后加了个防抖
  const onScroll = ({ detail, active }) => {
    scrollOldTop.value = detail.scrollTop;
    scrollActive.value = active;
    autoVideo();
  };
  // 滚动到底部
  const scrolltolower = active => {
    scrollActive.value = active;
    autoVideo();
    if (params.currentPage >= ajax.totalPage) return;
    params.currentPage++;
    init();
  };
  const onGoVideo = val => {
    uni.$uv.route({
      url: '/pages/teacher/videoPreview',
      params: {
        id: val.id
      }
    });
  };
  const toastRef = ref();
  const onCancelCollect = async (val, index) => {
    await uni.$uv.http.post(`app/collect/cancel`, {
      classify: 'teacher', //收藏类型
      objid: val.id, //收藏对象的数据ID
      optype: 'collect' //操作类型
    });
    ajax.list.splice(index, 1);
    toastRef.value.show({
      overlay: false,
      message: `取消收藏成功`,
      type: 'success'
    });
  };
</script>

<style lang="scss" scoped>
  .teachers {
    display: flex;
    flex-wrap: wrap;
    padding: 34.884rpx 0;
    font-size: 27.907rpx;

    .item {
      width: 100%;
      display: flex;
      margin: 0 36.628rpx;
      &-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 34.884rpx;
        .top {
          color: #000;
          padding-top: 17.442rpx;
          display: flex;
          align-items: center;

          &-main {
            flex: 1;
            &-subtitle {
              color: #959595;
              font-size: 24.419rpx;
              margin-top: 17.442rpx;
              margin-bottom: 6.977rpx;
            }
          }
          &-button {
            width: 123.837rpx;
            height: 50.581rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background-color: #b1b1b1;
            border-radius: 48.837rpx;
            font-size: 24.419rpx;
          }
        }
      }
    }
  }
</style>
